<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
               display: none;
        }
    </style>
</head>
    <body>
    茶叶名称<input type="text">
    茶叶类型<input type="text">
    茶叶价格<input type="text">
    <button class="box">添加</button>
    <input type="text">
    <button class="sou">搜索</button>
    <table border="1">
        <thead>
            <tr>
                <td>ID</td>
                <td>名称</td>
                <td>类型</td>
                <td>价格</td>
                <td>库存</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </tbody>

    </table>
    <div class="xiu">
    茶叶名称<input type="text">
    茶叶类型<input type="text">
    茶叶价格<input type="text">
    <button>修改</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 渲染
        function  xr(){

             $.ajax({
            type: 'GET',
            url: 'https://liu.zzgoodqc.cn/teas',
            dataType: 'json',
            success: (a) => {
                console.log(a);
            $('tbody').html('')
                 a.data.forEach(item => {

                    $('tbody').append(`
                <tr>
                <th>${item.id}</th>
                <th>${item.name}</th>
                <th>${item.type}</th>
                <th>${item.price}</th>
                <th>${item.stock}</th>
                <th><button onclick='shan(${item.id})'>删除</button><button onclick='gai('${item.id}')'>修改</button></th>
                </tr> `)
                });
            },
            error: (s) => {
                console.log(s);
            }
        })
        }
       xr()
    //   添加 
  $('.box').click(()=>{
    // console.log(1111);
    $.ajax({
        type:'POST',
         url:'https://liu.zzgoodqc.cn/teas',
         data:{
          name:$('input').eq(0).val(),
          type:$('input').eq(1).val(),
          price:$('input').eq(2).val()
         },
         dataType:'json',
         success:(x)=>{
            $('tbody').html('')
         xr()
          console.log(x);  
         },
         error:(e)=>{
        console.log(e);

         }
    })
  })
        // 删除
        function shan(i){
             $.ajax({
            type: 'DELETE',
            url: 'https://liu.zzgoodqc.cn./teas/'+i,
            dataType: 'json',
            success: (c) => {
           console.log(c);
          xr()
            },
            error: (b) => {
                console.log(b);
            }
        })
        }
    //    获取单个茶叶
      $('.sou').click(()=>{
        $.ajax({
            type: 'GET',
            url:'https://liu.zzgoodqc.cn./teas/',
            dataType:'json',
            success:(v)=>{
                 $('tbody').html('')
               console.log(v);
               var inp4=$('input').eq(3).val()
           v. data.forEach(item => {
                item.id == inp4
                if (item.id == inp4) {
                    $('tbody').append(` 
            <tr>
             <th>${item.id}</th>
                <th>${item.name}</th>
                <th>${item.type}</th>
                <th>${item.price}</th>
                <th>${item.stock}</th>
                <th><button onclick='shan(${item.id})'>删除</button><button>修改</button></th>
            </tr>`)
                }
            })       
            },
            error:(n)=>{
              console.log(n);

            }
        })
      })
    // //   修改
    // var iid;
    //       function gai(id){
    //     $('div').css('display','block')
    //     iid=id
    //       }
    //       $('.xiu button').click(()=>{
    //         var a=data.find(item=>item.id==id)
    //         a.name.$('.xiu input').eq(0)
    //         a.type.$('.xiu input').eq(1)
    //         a.price.('.xiu input').eq(2)
    //         xr()
    //       })
    </script>
</body>

</html>